<template>
	<div>
		<el-col :span="2">
			<el-menu
					:default-active="this.$route.path"
					router mode="horizontal"
					class="el-menu-vertical-demo"
					@open="handleOpen"
					@close="handleClose"
					background-color="#545c64"
					text-color="#fff"
					active-text-color="#ffd04b">
				<el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
					<template slot="title">
						<i class="el-icon-location"></i>
						<span> {{ item.navItem }}</span>
					</template>

				</el-menu-item>


			</el-menu>
		</el-col>

		<router-view     class="menu-right"/>

	</div>
</template>
<script>
	export default {
		data() {
			return {
				navList:[
					{name:'/components/history',navItem:'历史'},
					{name:'/components/trade',navItem:'交易'},
					{name:'/components/rule',navItem:'规则'},
				] }
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>

<style>
	.menu-right{
		margin-left:10px;
	}

</style>